<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 阻止表单默认提交   onsubmit="return false" -->
    <form action="" method="get" onsubmit="return false">
        <div class="input-group">
            <label for="user">用户名:</label>
            <input type="text" id="user" name="user">
        </div>
        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd">
        </div>
        <!-- <div class="input-group">
            <span>爱&emsp;好:</span>
            <label><input type="checkbox" name="hobby" value="sing">唱歌</label>
            <label><input type="checkbox" name="hobby" value="dance">跳舞</label>
            <label><input type="checkbox" name="hobby" value="rap">rap</label>
            <label><input type="checkbox" name="hobby" value="basketball">篮球</label>
        </div> -->
        <div class="input-group">
            <label for="user">手机号:</label>
            <input type="text" id="phone" name="phone">
        </div>
        <div class="input-group">
            <label for="">邮&emsp;箱:</label>
            <input type="text" name="email">
        </div>
        <div class="input-group">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </div>
    </form>
    <!-- 不使用表单提交数据 => JS提交 -->
    <!-- <div class="form">
        <div class="input-group">
            <label for="user">用户名:</label>
            <input type="text" id="user" name="user">
        </div>
        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd">
        </div>
        <div class="input-group">
            <span>爱&emsp;好:</span>
            <label><input type="checkbox" name="hobby" value="sing">唱歌</label>
            <label><input type="checkbox" name="hobby" value="dance">跳舞</label>
            <label><input type="checkbox" name="hobby" value="rap">rap</label>
            <label><input type="checkbox" name="hobby" value="basketball">篮球</label>
        </div>
        <div class="input-group">
            <label for="user">手机号:</label>
            <input type="text" id="phone" name="phone">
        </div>
        <div class="input-group">
            <label for="">邮&emsp;箱:</label>
            <input type="text" name="email">
        </div>
        <div class="input-group">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </div>
    </div> -->
</body>
<script>

    var userInp = document.getElementsByName("user")[0];
    var pwdInp = document.getElementsByName("pwd")[0];
    var phoneInp = document.getElementsByName("phone")[0];
    var emailInp = document.getElementsByName("email")[0];

    var submitBtn = document.querySelector("[type='submit']");


    // 既然不想借助表单提交  => 通过JS跳转页面和提交数据
    submitBtn.onclick = function(){ // 点击提交
        var user = userInp.value;
        var pwd = pwdInp.value;
        var phone = phoneInp.value;
        var email = emailInp.value;

        // url?user=zxczxc&pwd=123123&phone=17386141516&email=1272071496@qq.com

        if(user && pwd && phone && email){  // 全都有值
            location.href = `./login.html?user=${user}&pwd=${pwd}&phone=${phone}&email=${email}`;
        }else{
            alert("请传入完整信息")
        }
    }







</script>
</html>